<script setup>
	import { useStore } from 'vuex'
	import { useRoute, useRouter } from 'vue-router'
	import { ElMessage } from 'element-plus'
	const store = useStore()
	const route = useRoute()
	const router = useRouter()
	
	const userInfo = store.state.user.userInfo || {}
	
	// 点击下拉选择项
	const command = function (name) {
		console.log(name)
		if (name == 'lockscreen') {
			store.commit('user/setBackPagePath', route.path)
			store.commit('user/setLockStatus', 1)
			router.push('/lock')
		} else if (name == 'logout') {
			store.commit('clearAllInfo')
			ElMessage({
				message: '退出登录',
				type: 'success'
			})
			router.push('/login')
		}
	}
</script>

<template>
	<el-dropdown
		trigger="click"
		placement="bottom"
		:show-timeout="50"
		@command="command"
	>
		<div class="dropdown-title-wrap">
			<el-icon class="user-icon"><user-filled /></el-icon>
			<span class="username">
				{{ userInfo.nickname }}({{ userInfo.role.name }})
			</span>
			<el-icon class="arrow-icon"><arrow-down /></el-icon>
			<span class="avatar">{{ userInfo.nickname[0] }}</span>
		</div>
	    <template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item command="personal">个人中心</el-dropdown-item>
				<el-dropdown-item command="password">修改密码</el-dropdown-item>
				<el-dropdown-item command="lockscreen">锁定屏幕</el-dropdown-item>
				<el-dropdown-item command="logout">退出登录</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<style scoped lang="less">
	.el-dropdown {
		.dropdown-title-wrap {
			display: flex;
			align-items: center;
			cursor: pointer;
			color: #409eff;
			.user-icon {
				font-size: 18px;
			}
			.username {
				margin-left: 5px;
				line-height: normal;
			}
			.arrow-icon {
				margin-left: 5px;
				font-size: 18px;
			}
			.avatar {
				margin-left: 5px;
				line-height: 1;
				width: 32px;
				height: 32px;
				background: #304156;
				border-radius: 50%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
			}
		}
	}
</style>
